<template>
  <Category :scene="scene"></Category>

  <el-card class="box-card-main">
    <div v-show="scene === 0">
      <el-button @click="addSpuHandler" type="primary" icon="Plus" :disabled="category.c3Id ? false : true">添加SPU</el-button>
      <el-table :data="spuArr" border class="elTable">
        <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
        <el-table-column prop="spuName" label="SPU名称" align="center"></el-table-column>
        <el-table-column prop="description" label="SPU描述" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row, $index }">
            <el-button type="success" circle icon="Plus" size="small" @click="addSkuHandler(row)"></el-button>
            <el-button type="primary" circle icon="View" size="small" @click="viewSkuHandler(row)"></el-button>
            <el-button type="warning" circle icon="Edit" size="small" @click="updateHandler(row)"></el-button>
            <el-button type="danger" circle icon="Delete" size="small" @click="deleteHandler(row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="currentPageChange"
        @size-change="pageSizeChange"
        v-model:current-page="pageNo"
        v-model:page-size="limit"
        :page-sizes="[5, 10, 20, 50, 100, 200]"
        :background="true"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="total"
      />
    </div>
    <SpuForm ref="spuFormELe" v-show="scene === 1" @changeSecene="changeSecene"></SpuForm>
    <SkuForm ref="skuFormELe" v-show="scene === 2" @changeSecene="changeSecene"></SkuForm>
  </el-card>

  <el-dialog v-model="dialogTableVisible" title="SKU列表" width="1000">
    <el-table border :data="skuArr" max-height="600">
      <el-table-column prop="skuName" label="SKU名字" align="center" />
      <el-table-column prop="price" label="SKU价格" align="center" width="100" />
      <el-table-column prop="weight" label="SKU重量" align="center" width="100" />
      <el-table-column label="SKU图片" align="center" width="100">
        <template #default="{ row, $index }">
          <img class="img-item" :src="row.skuDefaultImg" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { SkuData, SkuInfoData } from '@/api/product/sku/types';
import { SpuData } from '@/api/product/spu/types';
import { ElMessageBox } from 'element-plus';

//当前页码
const pageNo = ref<number>(1);
//当前页数据数
const limit = ref<number>(5);
//总数据条数
const total = ref<number>(0);
// 是否切换到添加或者编辑场景
const scene = ref<number>(0);
//是否显示查看sku列表
const dialogTableVisible = ref<boolean>(false);
// spu数组
const spuArr = ref<SpuData[]>([]);
// 要展示的sku数组
const skuArr = ref<SkuData[]>([]);
// spu表单元素
const spuFormELe = ref();
//sku表单元素
const skuFormELe = ref();
// 三级分类仓库
const category = useCategoryStore();
// 监听c3Id变化，获取对应的spu
watch(
  () => category.c3Id,
  () => {
    // 当三级分类id发送变化时清空已有数据
    spuArr.value = [];
    if (!category.c3Id) return;
    getSpu();
  },
);
// 加载数据
const getSpu = async (pager = 1) => {
  if (!category.c3Id) return;
  pageNo.value = pager;
  const result: any = await reqGetSPU(pageNo.value, limit.value, category.c3Id);
  if (result.code === 200) {
    spuArr.value = result.data.records;
    limit.value = result.data.size;
    total.value = result.data.total;
  }
};
//当前页改变触发
const currentPageChange = () => {
  getSpu(pageNo.value);
};
//页面数据项改变触发
const pageSizeChange = () => {
  getSpu();
};
// 添加spu
const addSpuHandler = () => {
  scene.value = 1;
  spuFormELe.value.initAddSpuData(category.c3Id);
};
//更新spu
const updateHandler = async (row: SpuData) => {
  scene.value = 1;
  spuFormELe.value.initHasSpuData(row);
};
//删除spu
const deleteHandler = (row: SpuData) => {
  ElMessageBox.confirm(`确认要删除【${row.spuName}】这个数据吗？`, { title: '提示' })
    .then(async () => {
      const result: any = await reqDeleteSPU(row.id as number);
      if (result.code === 200) {
        ElMessage.success('删除成功');
        getSpu(spuArr.value.length > 1 ? pageNo.value : pageNo.value - 1);
      } else {
        ElMessage.error('删除失败');
      }
    })
    .catch(() => {
      ElMessage.success('已取消删除');
    });
};
// 添加sku
const addSkuHandler = (row: SpuData) => {
  scene.value = 2;
  skuFormELe.value.initAddSkuData(row);
};
// 查看spu的sku
const viewSkuHandler = async (row: SpuData) => {
  dialogTableVisible.value = true;
  const result: SkuInfoData = await reqGetSkuBySpuId(row.id as number);
  if (result.code === 200) {
    skuArr.value = result.data;
  }
};
// 传递给子组件的回调方法，用户子组件传递参数给父组件
const changeSecene = (obj: any) => {
  scene.value = obj.flag;
  if (obj.params === 'update') {
    getSpu(pageNo.value);
  } else {
    getSpu();
  }
};
</script>

<style lang="scss" scoped>
.box-card-main {
  margin-top: 10px;
  .elTable {
    width: 100%;
    margin: 10px 0;
    height: calc(100vh - $base-tabbar-height - 230px);
  }
}
.img-item {
  width: 100%;
  height: 100%;
}
</style>
